import Vue from 'vue'
import App from './App.vue' // 引入根组件
import router from './router' // 引入路由
import store from '@/store'   // 引入仓库
import { Button, MessageBox } from 'element-ui'  // 按需引入element-ui部分组件
import 'element-ui/lib/theme-chalk/index.css';   // element-ui样式文件

Vue.config.productionTip = false  // 关闭生产提示

// 引入mockServe.js --->mock数据
import '@/mock/mockServe'
// 引入swiper样式文件
import 'swiper/css/swiper.css'


/* 引入插件：图片懒加载 */
import VueLazyload from 'vue-lazyload'
/* 引入表单验证插件 */
import '@/plugins/validate'

/* 引入默认图片 */
import loadingImage from './assets/mr.gif'
// 使用插件
Vue.use(VueLazyload, {
  // 图片未加载出来，显示默认图片
  loading: loadingImage
})






// 定义全局组件：在入口文件注册一次之后，在任何组件当中都可以使用
// 引入三级联动组件
import TypeNav from '@/components/TypeNav'
// 引入轮播图组件
import Carousel from '@/components/Carousel'
// 引入分页组件
import Pagination from '@/components/Pagination'

// 注册为全局组件 ————第一个参数：全局组件的名字；第二个参数：哪一个组件
Vue.component(TypeNav.name, TypeNav)
Vue.component(Carousel.name, Carousel)
Vue.component(Pagination.name, Pagination)
Vue.use(Button) // 注册Button组件
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;


// 统一引入API接口  在全局事件中配置
import * as API from '@/api'



new Vue({
  // $route(路由)：可以获取到路由信息（path、query、params）
  // $router：进行编程式导航路由跳转push || replace
  router,   // 注册路由：当这里写router时，组件身上都拥有$router,$route属性
  store,    // 注册仓库：组件实例的身上会多一个属性$store属性
  // 配置全局事件总线$bus【原型方式创建事件总线】
  beforeCreate() {
    Vue.prototype.$bus = this  // 这里的this -->为：vue
    Vue.prototype.$API = API   // 这里的API --->为：引入的所有API接口   挂载到原型链prototype上 --->使用接口就不用一个个引入了
  },
  render: h => h(App)
}).$mount('#app')
